<template>
  <div class="qw">
    <div class="q">
        <div class="w">
            <img src="../img/我的.png" alt="" @click="set">
            <img src="../img/我的1.png" alt="" @click="message">
        </div>
        <div class="a">
            <div><img src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/86335d5cf9fb47a184ec518e8551f7d0_mergeImage.png" alt=""></div>


            <div><span>{{username}}</span></div>
        </div>
    </div>
    <div class="qq">
        <div class="b">
            <div class="ming"><b>我的订单</b></div>
            <div class="rong">
                <div><img src="../img/我的@2x.png" alt=""><p>待付款</p></div>
                <div><img src="../img/111.png" alt=""><p>待服务</p></div>
                <div><img src="../img/11.png" alt=""><p>待验收</p></div>
                <div><img src="../img/我的123.png" alt=""><p>待评价</p></div>
            </div>
        </div>
    </div>
        <div class="c">
            <div class="ming"><b>我的钱包</b></div>
            <div class="rong">
                <div><p>888</p><p>余额</p></div>
                <div><p>888</p><p>代金卷</p></div>
                <div><p>888</p><p>收入</p></div>
            </div>
        </div>
        <div class="d">
            <div class="rong">
                 <div><img src="../img/客服.png" alt=""><p>客服联系</p></div>
                <div><img src="../img/我的评价.png" alt=""><p>我的评价</p></div>
                <div><img src="../img/售后.png" alt=""><p>投诉/售后</p></div>
                <div><img src="../img/常用_地址.png" alt=""><p>常用地址</p></div>
            </div>
        </div>

        <van-dialog v-if="show" title="请先登录" @cancel="cancel" @confirm="ok" show-cancel-button></van-dialog>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    data() {
        return {
            show:false,
            username:"请点击登录",
        }
    },
    computed:{
        // ...mapState("login",["show"]),
    },
    methods:{
        ...mapMutations("login",["login"]),
        set(){
            let token=localStorage.getItem("token");
            if(token==null){
                this.show=true;
            }else{
                this.$router.push("/set")
            }
            // this.login("/set")
        },
        message(){
            this.$router.push("/home/message")
        },
        ok(){
            this.$router.push("/denglu")
        },
        cancel(){
            this.show=false;
        },
        userName(){
            const token = localStorage.getItem("token") ? localStorage.getItem("token"):""
            
            if(token){
                this.username = localStorage.getItem("username") 
            }
        }
    },
    created () {
        this.userName()
    },
}
</script>

<style>
  

.qw{
    height:100%;
    background-color: #F4F4F4;
}
.q{
    background: #16CEBB;
}
.qq{
    height:1.04rem;
    background:linear-gradient(#16CEBB,#F4F4F4,#F4F4F4)
}
.w{
    position: absolute;
    top: -.5rem;
    right: 0rem;
}
.w :nth-child(2){
    margin-right: .15rem;
}
.a{
    height: 1.4rem;
}
.a div{
    float: left; 
    font-size: .17rem;    
}
.a :nth-child(2){
    color: white;
    margin-top: .6rem;
}
.a img{
    width: .7rem;
    height: .7rem;
    margin-top: .35rem;
    margin-left: .2rem;
    margin-right:0.06rem;
}
.b{
    width: 3.32rem;
    height: 1.04rem;
    background-color: #fff;
    border-radius: .2rem;
    margin: 0 auto;
    font-size: .15rem;
    position: relative;
}
.d{
    width: 2.92rem;
    height: 0.64rem;
    background-color: #fff;
    border-radius: .2rem;
    margin: 0 auto;
    font-size: .1rem;
    /* position: relative; */
    margin-top: .1rem;
    padding: .2rem;
}
.d img{
    margin-bottom: 0.1rem;
}
.c{
    width: 3.32rem;
    height: 1.04rem;
    background-color: #fff;
    border-radius: .2rem;
    margin: 0 auto;
    font-size: .15rem;
    position: relative;
    margin-top: .1rem;
}
.c .rong div :nth-child(2){
    margin-top: .1rem;
}
.c .rong div :nth-child(1){
    margin-top: .1rem;
}
.ming{
    width: 2rem;
    height: .3rem;
}
.ming b{
    margin-top: .2rem;
    line-height: .4rem;
    margin-left: .2rem;
}
.rong{
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.rong img{
    width: .3rem;
    height: .3rem;
}
.la{
    width: 2.92rem;
    height: 0.64rem;
    background-color: #fff;
    border-radius: .2rem;
    margin: 0 auto;
    font-size: .15rem;
    position: relative;
    margin-top: .1rem;
    padding: .2rem;
}
</style>